﻿
@{
    ViewData["Title"] = "用户信息页面";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}

<div>
    <div class="layui-row layui-form">
        <div class="layui-col-md2 layui-col-md-offset5 " style="margin-top: 20px">
        <input type="text" id="txt_Select" placeholder="请输入员工名字" class="layui-input"></div>
        <div class="layui-col-md1" style="margin:20px auto auto 5px ;"> 
        <button class="layui-btn layui-btn-radius" onclick="btn_search()">搜索</button></div>
    </div>
    <div class="layui-row">
        <table id="mytable" lay-filter="test"></table>
    </div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-row">
            <div class="layui-btn-container layui-col-md6">
                <button class="layui-btn layui-btn-sm" onclick="btn_add()"><i class="layui-icon"></i>添加员工信息</button>
                <button class="layui-btn layui-btn-sm" lay-event="update"><i class="layui-icon"></i>修改选中信息</button>
                <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="repwd"><i class="layui-icon"></i>重置密码</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="checkrole"><i class="layui-icon"></i>分配角色</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon layui-icon-delete" style="color: white"></i>删除选中员工</button>
            </div>
        </div>
    </script>

    <script type="text/html" id="checkboxTpl">
        <!-- 这里的 checked 的状态只是演示 -->
        <input type="checkbox" name="lock" value="{{d.Id}}" title="开启用户" lay-filter="lockDemo" {{ d.DelFlag == 0 ? 'checked' : '' }}>
    </script>
    <script type="text/html" id="sexTpl">
        {{#  if(d.Sex == 1){ }}
        <span style="color:#0b61bf">男</span>
        {{#  } else if(d.Sex == 2) { }}
        <span style="color:#e20dd1">女</span>
        {{#  }else{ }}
        <span>未知</span>
        {{#  } }}
    </script>
</div>
<script type="text/javascript">
    var table;
    var active;
    var url = "";
    var action;
    var tabIns = null;  //定义一个对象
    layui.use('table', function () {
        table = layui.table;
        var form = layui.form;
        //第一个实例
        table.render({
            elem: '#mytable'
            , skin: 'line' //行边框风格
            , url: '/User/GetJsonList' //数据接口
            , toolbar: '#toolbarDemo'
            , cellMinWidth: 70    //  自适应宽度，最短宽度80
            , page: true //开启分页
            , limits: [5, 10, 15, 20, 25, 30]
            , limit: 15 //每页默认显示的数量
            , defaultToolbar: ['filter', 'print', 'exports']//自由配置头部工具栏右侧的图标,导出乱码bug
            , cols: [[ //表头
                { type: 'checkbox', fixed: 'left' }
                //, { field: 'Id', title: 'Id', sort: false, fixed: 'left', width: 70 }
                , { field: 'UserId', title: '用户账号', sort: false }
                , { field: 'UserName', title: '用户名字', sort: false }
                , { field: 'Sex', title: '性别', sort: true, templet: '#sexTpl', unresize: true }
                , { field: 'DepartmentName', title: '所属部门', sort: true }
                , { field: 'RoleName', title: '拥有的角色', sort: true }
                , { field: 'PhoneNum', title: '手机号码', sort: false }
                , { field: 'lock', title: '用户状态', templet: '#checkboxTpl', unresize: true }
                , { field: 'AddTime', title: '添加时间', sort: false }
            ]],

        });
        //工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'update':
                    //获取选中的个数
                    if (checkStatus.data.length == 1) {
                        //获取选中的信息
                        var data = checkStatus.data;
                        //转成json格式的字符串
                        var strdata = JSON.stringify(data);
                        //转成json格式
                        var jsondata = JSON.parse(strdata);
                        //调用更新的方法
                        btn_update(jsondata[0].Id);
                    } else {
                        layer.alert("必须选中且只能选中一条信息！");
                    }
                    break;
                case 'delete':
                    if (checkStatus.data.length > 0) {
                        //获取选中的信息
                        var data = checkStatus.data;
                        //转成json格式的字符串
                        var strdata = JSON.stringify(data);
                        //转成json格式
                        var jsondata = JSON.parse(strdata);
                        //构造字符串
                        var idstr = "";
                        for (var i = 0; i < jsondata.length; i++) {
                            idstr += jsondata[i]["Id"] + ",";
                        }
                        //调用删除方法
                        btn_delete(idstr);

                    } else {
                        alert("请选择你要删除的信息！");
                    }
                    break;
                case 'repwd':
                    //获取选中的个数
                    if (checkStatus.data.length == 1) {
                        //获取选中的信息
                        var data = checkStatus.data;
                        //转成json格式的字符串
                        var strdata = JSON.stringify(data);
                        //转成json格式
                        var jsondata = JSON.parse(strdata);
                        //调用更新的方法
                        btn_repwd(jsondata[0].Id);
                    } else {
                        layer.alert("必须选中且只能选中一条信息！");
                    }
                    break;
                case 'checkrole':
                    //获取选中的个数
                    if (checkStatus.data.length == 1) {
                        //获取选中的信息
                        var data = checkStatus.data;
                        //转成json格式的字符串
                        var strdata = JSON.stringify(data);
                        //转成json格式
                        var jsondata = JSON.parse(strdata);
                        //调用更新的方法
                        btn_checkrole(jsondata[0].UserId);
                    } else {
                        layer.alert("必须选中且只能选中一条信息！");
                    }
                    break;
            };
        });

        //监听锁定操作
        form.on('checkbox(lockDemo)', function (obj) {
            //layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
            $.ajax({
                type: 'post',
                url: '/User/ForbidUser',
                data: {
                    id: this.value,
                    flag: obj.elem.checked,
                },
                success: function (data) {
                    layer.alert(data);
                    btn_search();
                }
            });
        });
    });
    layui.use('layer', function () {
        //触发事件
        var id = "100";
        active = {
            notice: function () {
                //示范一个公告层
                layer.open({
                    type: 1
                    , title: [action, 'font-size:18px;']
                    , closeBtn: 1
                    , area: ['780px', '420px']
                    , shade: 0.8
                    , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    , btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content:'<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>'
                    , success: function (layero) {
                    }
                    , yes: function (index, layero) {
                        if (confirm('确定要' + action + '吗？')) { //只有当点击confirm框的确定时，该层才会关闭
                            layer.close(index)
                        }
                    }
                    , cancel: function (index, layero) {
                        layer.close(index);
                        //刷新table
                        btn_search();
                    }
                });
            }
        };
    });
    //查询
    btn_search = function () {

        var selectInfo = $("#txt_Select").val();
        table.reload('mytable', {
            url: '/User/GetJsonList',
            page: {
                curr: 1//从第一页开始
            },
            where: {
                selectInfo: selectInfo,//设定异步数据接口的额外参数
            }
        });
    };
    //添加
    btn_add = function () {
        action = "添加用户";
        url = "/User/AddIndex";
        var othis = $(this);
        active["notice"] ? active["notice"].call(this, othis) : '';
    };
    //修改
    btn_update = function (Id) {
        //alert(Id);
        action = "修改用户信息";
        url = "/User/UpdateIndex?id=" + Id + "";
        var othis = $(this);
        active["notice"] ? active["notice"].call(this, othis) : '';
    };
    //删除
    btn_delete = function (Id) {
        //alert(Id);
        $.get("/User/Delete?id=" + Id + "", {}, function (res) {
            alert("删除成功");
            tabIns.reload();
        })
    };
    //重置密码
    btn_repwd = function (Id) {
        //alert(Id);
        $.ajax({
            type: 'post',
            url: '/User/RePwd',
            data: {
                id: Id,
            },
            success: function (data) {
                layer.alert(data);
                btn_search();
            }
        });
    };

    //配置角色信息
    btn_checkrole = function (UserId) {
        //alert(UserId)
        action = "配置角色信息";
        url = "/Role/ConfigIndex?userid=" + UserId + "";
        var othis = $(this);
        active["notice"] ? active["notice"].call(this, othis) : '';
    };
</script>

   